<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福利页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
    html,body{
        height: 100%;
        margin: 0;
        background-color:#f7f7f7;
        position: relative;
    }
    .div_container{
      background: #fff;

    }
    .div_container1{
        width: 90%;
        margin-top: 8px;
        margin-left: 5%;
    }
    .div_img{
      height: 120px;
      text-align: center;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 120px;
    }
    .span_title{
      font-size: 15px;
      color: #101010;
      margin-top: 9px;
      margin-bottom: 7px;
    }
    .div_ba{
      height: 1px;
      background-color: #eaeaea;
    }
    .div_explain_left{
      height: 13px;
      width: 13px;
      text-align: center;
      background-image: url(../image/gift.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 13px 13px;

    }
    .div_explain_right{
      -webkit-box-flex:1.0;
      font-size: 12px;
      color: #999999;
      margin-left: 8px;
      margin-top: 1px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .div_father_explain{
     display:-webkit-box;
     margin-top: 9px;
    }

    .div_progress{
      text-align: center;
      margin-top: 60%;
    }
    .div_progress img{
      width: 35px;
      height: 35px;

    }
    .welfare_iframe{
      width: 100%;
      display:none;
      overflow-x: hidden;
    }

    .determine_url{
      width: 40%;
      height: 45px;
      line-height: 45px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      background-color: #e22a28;
      border-radius: 50px;
      position: fixed;
      margin-left: 30%;
      bottom: 2%;
      display: none;
    }

    </style>
</head>

<body>

  <div class="div_container" style="display:none">
       <div class="div_height"style="height:13px;background-color:#f7f7f7;"></div>
    <div class="div_container1">
      <div class="div_img">
      </div>
      <span class="span_title"></span>
      <div class="div_ba"></div>
      <div class="div_explain_container">

      </div>
      <div style="height:9px"></div>
    </div>
  </div>

  <div class="div_father_explain" style="display:none">
     <div class="div_explain" style="display:-webkit-box;margin-top: 6px;">
           <div class="div_explain_left"></div>
           <div class="div_explain_right"></div>
     </div>
  </div>

  <iframe class="welfare_iframe" name="ifrmname" src="">
  </iframe>

      <div id="mian">
          <div class="div_progress">
              <img src="../image/loading_more.gif">
          </div>
      </div>

      <div class="determine_url">
        马上申请
      </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

    var iFrame;       //iframe  View
    var divContext;  //Context div
    var clickState = true;
    var mData;
    var mClickSubscript; //详情的点击下标
    var mDivUrl;
    apiready = function() {
        init();
        getData();
    };

    $(document).ready(function(){
      //init();
      //initView(getData());
   });

    //获取后台广告列表数据
    function getData(){
      var vertype = 2;
      if(api.systemType == 'android'){
        vertype = 1;
      }
      var parame = {
          appType:1,
          vertype:vertype,
          siteAreaid: $api.getStorage(common.appKey.siteAreaid),
          userid:$api.getStorage(common.appKey.userId),
          pageSize:30,
          pageNum:1,
          framePage:'fuli',
      }
      var parames = common.getJSONParame(common.keyword.url_pageHome, JSON.stringify(parame));
      common.getConsole('请求广告列表数据',JSON.stringify(parames)+'....fwq...'+$api.getStorage(common.appKey.appServer));
      common.ajax($api.getStorage(common.appKey.appServer), parames, 8, function(ret,err) {
        document.getElementsByClassName('div_progress')[0].style.display = 'none';
          if (ret) {
              common.getConsole('广告列表数据', JSON.stringify(ret));
              if (ret.code == 1) {
                   mData = ret.data;
                  initView(ret.data);
              } else {
                  common.getShowViewError(ret.code,ret.msg);
              }
          } else {
            common.getConsole('广告列表接口异常', JSON.stringify(err));
              common.getShowViewError(err.code,err.msg);
          }
      })

    }

    //初始化
    function init(){

      api.setStatusBarStyle({
        style: 'dark'
      });

      iFrame = document.getElementsByClassName('welfare_iframe')[0];
      mDivUrl = document.getElementsByClassName('determine_url')[0];
      divContext = document.getElementById('mian');
      mDivUrl.onclick = function(){
        if(mDivUrl.innerText == "返回"){
              closeWebpage();
        }else if(mDivUrl.innerText == '点击下载'){
          mDivUrl.innerText = '返回';
          iFrame.src = mData[mClickSubscript].submitLink;
          api.sendEvent({
            name:'APICloud4Message',
            extra:{
            type:'middle'
            }
          });
        }else {
          api.sendEvent({
            name:'APICloud4Message',
            extra:{
            type:'webView',
            title:mData[mClickSubscript].title,
            url:mData[mClickSubscript].submitLink
            }
          });
        }
      }

      api.addEventListener({
          name: 'swiperight'
      }, function(ret, err) {
         console.log('向右轻扫1');
         if(!clickState){
              clickState = true;
              closeWebpage();
         }
      });

      api.addEventListener({
          name: 'welfareMainFrame'
      }, function(ret, err) {
          console.log('.......收到系统返回按钮......');
          if(ret.value.type == 1){
            if(clickState){
              onClickMsg('keyback','');
            }else {
              if(!clickState){
                   clickState = true;
                   closeWebpage();
              }
            }
          }else if(ret.value.type == 2){
                  addOptimization();
          }
      });

    }

    //初始化View
    function initView(data){
      var temp = document.getElementsByClassName('div_container')[0].innerHTML;
      for (var i = 0; i < data.length; i++) {
        var div = document.createElement('div');
        div.innerHTML = temp;
        div.style.backgroundColor='#FFF';
        var title = div.getElementsByClassName('span_title')[0];
        var divBa = div.getElementsByClassName('div_img')[0];
        var divLine = div.getElementsByClassName('div_ba')[0];
        var explainContainer = div.getElementsByClassName('div_explain_container')[0];
        if(data.length>1){
          if(i == 0){
            var divContainer1 = div.getElementsByClassName('div_container1')[0];//div_height
            var divHeight = div.getElementsByClassName('div_height')[0];
            divContainer1.style.marginTop = '0px';
            divHeight.style.height = '0px';
          }
        }
        title.innerText = data[i].title;
        setBitmap(divBa,data[i].thumbnail);
        addExplain(explainContainer,data[i].adExplain,divLine);
        (function(Index) {
            div.addEventListener('click', function(e) {
            console.log('.........addEventListener.........'+Index);
            mClickSubscript = Index;
            // var url = '?submitTxt='+mData[Index].submitTxt+'&submitLink='+mData[Index].submitLink+'&submitCallback='+mData[Index].submitCallback;
             jumdeNetwork(Index);
            }, false);
        })(i);
        $('#mian').append(div);
      }
    }

    function addExplain(div,data,divLine){
      var data1 = data.split('#');
      var temp = document.getElementsByClassName('div_father_explain')[0].innerHTML;
      for (var i = 0; i < data1.length; i++) {
        var divExplain = document.createElement('div');
        divExplain.innerHTML = temp;
        var explainRight = divExplain.getElementsByClassName('div_explain_right')[0];
        if(data1[i].length == 0){
             if( i== 0 ){
                 divLine.style.display = 'none';
             }
        }else {
          explainRight.innerText = data1[i];
          div.appendChild(divExplain);
        }
      }
    }

    //判断网络
    function jumdeNetwork(index){
      common.getApiShowProgress();
      common.judgeCloudNetworkState(2,function(state){
        common.getApiHideProgress();
        if(state){
             clickState = false;
             changeWebpage(index);
             addOptimization();
        }else {
          api.toast({
              msg: '请连接互联网,再点击',
              duration: 2000,
              location: 'bottom'
          });
        }

      })
    }

    //设置图片
    function setBitmap(View,url){
       common.judgeCloudNetworkState(1,function(state){
                if(state){
                     View.style.backgroundImage = 'url('+url+')';
                }else {
                  var server = $api.getStorage(common.appKey.appServer);
                  var i = server.indexOf("pro");
                  server = server.substring(0,i);
                  var i1 = url.indexOf('wifi');
                  url = url.substring(i1,url.length);
                  View.style.backgroundImage = 'url('+server+url+')';
                  common.getConsole('图片地址..','..url...'+server+url);
                }
       })
    }

    //点击了详情页的按钮
    function addOptimization(){
      var parame = {
          siteAreaid: $api.getStorage(common.appKey.siteAreaid),
          userid:$api.getStorage(common.appKey.userId),
          rewardCount:mData[mClickSubscript].rewardCount,
      }
      var parames = common.getJSONParame(common.keyword.deal_addLongTime,JSON.stringify(parame));
      common.getConsole('点击了广告详情',JSON.stringify(parame));
      common.ajax($api.getStorage(common.appKey.appServer), parames, 8, function(ret, err) {
        document.getElementsByClassName('div_progress')[0].style.display = 'none';
          if (ret) {
              common.getConsole('广告详情数据', JSON.stringify(ret));
              if (ret.code == 1) {
                api.sendEvent({
                  name:'APICloud4Message',
                  extra:{
                  msg:msg,
                  type:'middle'
                  }
                });
              }
          } else {
            common.getConsole('广告列表接口异常', JSON.stringify(err));
          }
      })

    }

    //给原生发送消失
    function onClickMsg(type,msg){
      api.sendEvent({
        name:'APICloud4Message',
        extra:{
        msg:msg,
        type:type
        }
      });
    }

    //打开一个网页 隐藏其他的元素
    function changeWebpage(index){
          if(mData[index].submitTxt == ''){        
            api.sendEvent({
              name:'APICloud4Message',
              extra:{
              type:'webView',
              title:mData[mClickSubscript].title,
              url:mData[index].detail
              }
            });

          }else {
            mDivUrl.style.display = "block";
            mDivUrl.innerText = mData[index].submitTxt;
            divContext.style.display = "none";
            iFrame.style.display = "block";
            iFrame.style.height =  api.frameHeight +'px';
            iFrame.style.position = 'absolute';
            iFrame.src = mData[index].detail;
          }

    }

    //关闭 iFrame 显示其他的元素
    function closeWebpage(){
          divContext.style.display = "block";
          iFrame.style.display = "none";
          mDivUrl.style.display = "none";
    }

</script>

</html>
